<template>
    <el-form label-width="82px" label-position="right" class="zw-form-layout">
        <el-row :gutter="24">
            <el-col :span="8">
                <el-form-item label="店铺信息">
                    <el-input v-model.trim="ruleForm.shopName" clearable placeholder="请输入店铺名称/店铺编号" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="店铺类型">
                    <el-select v-model="ruleForm.type" placeholder="全部类型" class="select">
                        <el-option
                            v-for="(item, index) in shopStatus"
                            :key="index"
                            :value="item.value"
                            :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <template v-if="defaultExpand">
                <el-col :span="8">
                    <el-form-item label="状态">
                        <el-select v-model="ruleForm.status" placeholder="全部状态">
                            <el-option
                                v-for="(item, index) in statusList"
                                :key="index"
                                :value="item.value"
                                :label="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所在区域">
                        <el-cascader
                            v-model="ruleForm.area"
                            placeholder="请选择省市区"
                            :show-all-levels="false"
                            :collapse-tags="true"
                            @visible-change="handleVisibleChange"
                            :options="addressList"
                            :props="defaultProps" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人信息">
                        <el-input v-model.trim="ruleForm.contactPerson" placeholder="请输入联系人姓名/手机号" />
                    </el-form-item>
                </el-col>
            </template>

            <el-col>
                <el-button type="primary" @click="onSearch(ruleFormRef)">查询</el-button>
                <el-button plain @click="onReset(ruleFormRef)">清空</el-button>
                <el-button
                    v-if="defaultExpand"
                    class="icon_btn"
                    :text="true"
                    type="primary"
                    @click="defaultExpand = !defaultExpand">
                    收起<el-icon><ArrowUp /></el-icon>
                </el-button>
                <el-button v-else class="icon_btn" :text="true" type="primary" @click="defaultExpand = !defaultExpand">
                    展开<el-icon><ArrowDown /></el-icon>
                </el-button>
            </el-col>
        </el-row>
    </el-form>
</template>

<script setup>
import storage from '@/commons/storage';
import { packSelectObjUtil } from '@/commons/utils.js';
import constants from '@/commons/constants';
import request from '@/request';
import { onActivated, reactive, ref } from 'vue';

const emit = defineEmits(['search', 'reset']);
const shopStatus = reactive(packSelectObjUtil(constants.SHOP_STATUS));
const statusList = reactive(packSelectObjUtil(constants.SHOP_ENABLED));
shopStatus.unshift({ value: 0, label: '全部类型' });
statusList.unshift({ value: 0, label: '全部状态' });
const defaultExpand = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
    status: 0, // 1启用 2停用
    type: 0, // 店铺类型 1：加盟   2：直营
    area: [
        // {
        //     provinceId: 7, // 省id
        //     cityId: 89, // 市id
        //     areaId: 937, // 区id
        //     townId: 11309 // 镇id
        // }
    ],
    contactPerson: '',
    shopName: ''
});

/* 获取地区列表 */
const addressList = reactive([]);
const defaultProps = {
    emitPath: true,
    multiple: true,
    label: 'name',
    value: 'id'
};

const handleVisibleChange = async visible => {
    if (visible && addressList.length === 0) {
        const { data } = await request('regionServ', { level: 3 });
        if (Array.isArray(data)) {
            data.splice(0, 1);
            addressList.push(...data);
        }
    }
};

const onSearch = () => {
    let result = {};
    for (const [key, value] of Object.entries(ruleForm)) {
        result[key] = value;
    }
    result.area = result.area.map(item => {
        return {
            provinceId: item[0],
            cityId: item[1] || '',
            areaId: item[2] || '',
            townId: item[3] || ''
        };
    });
    emit('search', result);
};
const onReset = () => {
    for (const [key, value] of Object.entries(ruleForm)) {
        ruleForm[key] = Array.isArray(value) ? [] : '';
        if (['status', 'type'].includes(key)) ruleForm[key] = 0;
    }
    let result = {};
    Object.assign(result, ruleForm);
    emit('reset', result);
};
onActivated(() => {
    const SEARCH_RESET = storage.get('SEARCH_RESET');
    SEARCH_RESET ? onReset() : onSearch();
    storage.set('SEARCH_RESET', true);
});
</script>
<style lang="scss" scoped>
:deep(.el-cascader) {
    width: 100%;
}
.el-form {
    padding: 16px 24px 16px 18px;
    margin-bottom: 16px;

    .el-row {
        margin: -8px -10px;

        .el-col {
            margin: 8px 0;

            &:last-of-type {
                flex: auto;
                text-align: right;
            }

            .el-form-item {
                margin-bottom: 0;

                .el-form-item__label-wrap {
                    .el-form-item__label {
                        font-size: 14px;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #33302d;
                    }
                }

                .el-form-item__content {
                    .el-input,
                    .el-select,
                    .el-date-editor {
                        width: 100%;
                    }
                }
            }

            .el-button--text {
                border: 1px solid transparent;
            }
            .icon_btn {
                padding: 0;
                margin-left: 8px;
                .el-icon {
                    margin-left: 5px;
                }
            }
        }
    }

    &__cascader-panel {
        display: none;
    }
}
</style>
